<html>

<head>
    <title>007 | Interactive cubes | J3D</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <link rel="stylesheet" href="common/common.css"/>
    <script type="text/javascript" src="common/common.js"></script>

    <script type="text/javascript" src="../build/j3d.js"></script>

    <script>

        var engine, sun, cube1, cube2, cube3, camera, cubemesh;
        var outTexture, overTexture;
        var mx = 0, my = 0;

        var isInside = true;
        var cs = 5;

        function init() {
            if (!checkWebGL()) return;

            engine = new J3D.Engine();
            engine.setClearColor(J3D.Color.white);

            ambient = new J3D.Transform();
            ambient.light = new J3D.Light(J3D.AMBIENT);
            ambient.light.color = new J3D.Color(0.75, 0.75, 0.75, 1);

            outTexture = createTexture("#87b95a", "#1f5a7c");
            overTexture = createTexture("#944d00", "#01b0ea");

            sun = new J3D.Transform();
            sun.light = new J3D.Light(J3D.DIRECT);
            sun.light.color = new J3D.Color(0.75, 0.75, 0.75, 1);
            sun.light.direction = new v3(0, -1, 0).norm();


            cube1 = new J3D.Transform();
            cube1.position.x = -2 * cs;
            cube1.renderer = J3D.BuiltinShaders.fetch("Gouraud");
            cube1.renderer.textureTile = new v2(0.5, 0.5);
            cube1.renderer.colorTexture = outTexture;
            cube1.renderer.hasColorTexture = true;
            cube1.textureOffset = new v2(0.66, 0.66);

            cube2 = new J3D.Transform();
            cube2.position.x = 0 * cs;
            cube2.renderer = J3D.BuiltinShaders.fetch("Phong");
            cube2.renderer.colorTexture = outTexture;
            cube2.renderer.hasColorTexture = true;

            /*
             *  There are two ways to specify tile and offset values: per renderer and per transform
             *  If settings are specified per transform they override whatever was set per renderer.
             */

            cube2.renderer.textureTile = new v2(4, 4); // <- per renderer (will be used by all objects that share this renderer)
            cube2.textureTile = new v2(2, 2); // <- comment out to use renderers settings above

            cube3 = new J3D.Transform();
            cube3.position.x = 2 * cs;
            cube3.renderer = J3D.BuiltinShaders.fetch("Gouraud");
            cube3.renderer.colorTexture = outTexture;
            cube3.renderer.hasColorTexture = true;

            cubemesh = J3D.Primitive.Cube(cs, cs, cs);
            cube1.geometry = cubemesh;
            cube2.geometry = cubemesh;
            cube3.geometry = cubemesh;

            var cubecollider = J3D.Collider.Mesh(cubemesh);
            cube1.collider = cubecollider;
            cube2.collider = cubecollider;
            cube3.collider = cubecollider;

            camera = new J3D.Transform();
            camera.camera = new J3D.Camera({ fov:30, near:1 });

            camera.position = new v3(2 * cs, 2 * cs, 8 * cs);
            camera.rotation = new v3(Math.PI * -0.075, Math.PI * 0.075, 0);

            engine.camera = camera;

            engine.scene.add(camera, sun, ambient, cube1, cube2, cube3);

            document.onmousemove = onMouseMove;

            draw();
        }

        function createTexture(ca, cb) {
            var cnv = document.createElement("canvas");
            cnv.width = 256;
            cnv.height = 256;
            var ctx = cnv.getContext("2d");

            ctx.fillStyle = ca;
            ctx.fillRect(0, 0, 128, 128);
            ctx.fillRect(128, 128, 128, 128);

            ctx.fillStyle = cb;
            ctx.fillRect(128, 0, 128, 128);
            ctx.fillRect(0, 128, 128, 128);

            return new J3D.Texture(cnv);
        }

        function onMouseMove(e) {
            mx = e.clientX;
            my = e.clientY;
        }

        function setDebug(s) {
            document.getElementById("details").innerHTML = s;
        }

        function draw() {
            cube1.rotation.x += Math.PI * J3D.Time.deltaTime / 12000;
            cube1.rotation.y -= Math.PI * J3D.Time.deltaTime / 6000;

            cube2.rotation.x -= Math.PI * J3D.Time.deltaTime / 10000;
            cube2.rotation.y += Math.PI * J3D.Time.deltaTime / 7000;

            cube3.rotation.x += Math.PI * J3D.Time.deltaTime / 13000;
            cube3.rotation.y -= Math.PI * J3D.Time.deltaTime / 5000;

            // tile and offset can be animated as well
            var a = Math.sin(J3D.Time.time);
            cube3.textureTile.x = cube3.textureTile.y = 2 + a;
            cube3.textureOffset.x = cube3.textureOffset.y = -a / 2;

            var r = J3D.Ray.fromMousePosition(mx, my, camera);

            var c1h = J3D.Intersection.rayTest (r, cube1);
            var c2h = J3D.Intersection.rayTest (r, cube2);
            var c3h = J3D.Intersection.rayTest (r, cube3);

            cube1.renderer.colorTexture = (c1h) ? overTexture : outTexture;
            cube2.renderer.colorTexture = (c2h) ? overTexture : outTexture;
            cube3.renderer.colorTexture = (c3h) ? overTexture : outTexture;

            engine.render();
            requestAnimationFrame(draw);
        }

    </script>

</head>

<body onload="init();">

<script>
    setLabels("007. Interactive cubes", "Canvas texture, animated (tile, offset).<br>Mouse interaction with box collider.");
</script>

<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-24294554-1']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();

</script>

</body>

</html> 












